<template>
	<div class='wy-main car-info'>
		<a-row class="wy-main-title" v-if='!type'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">新增驾驶员</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form" >
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员姓名">
				<a-input :disabled="disabled"  maxlength="48" onkeyup="value=value.replace(/[\d]/g,'')" v-decorator="[ 'driverName', {rules: [{ required: true, message: '请输入驾驶员姓名!'}]}]" placeholder='请输入驾驶员姓名' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件类型">
				<a-select :disabled="disabled" v-decorator="[ 'certificatesType', {rules: [{ required: true, message: '请选择证件类型!' }]} ]" placeholder="请选择证件类型">
					<a-select-option v-for="(item,index) in cardTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件号">
				<a-input :disabled="disabled" v-decorator="[ 'certificatesNo', {rules: [{ required: true, message: '证件号不能为空!' },{validator: checkCardId}]}]" placeholder='请输入证件号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="手机号">
				<a-input :disabled="disabled" v-decorator="[ 'mobile', {rules: [{ required: true,message: '手机号不能为空!'},{validator: checkMobile}]}]" placeholder='请输入手机号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="居住地址">
				<a-input :disabled="disabled" v-decorator="[ 'address', {rules: [{ required: true, message: '居住地址不能为空!' }]}]" placeholder='请选择居住地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="详细地址">
				<a-input :disabled="disabled" v-decorator="[ 'detailAddress', {rules: [{ required: true, message: '输入详细地址!' }]}]" placeholder='输入详细地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="电子邮箱">
				<a-input :disabled="disabled" v-decorator="[ 'email',{rules: [{validator: checkMail}]}]" placeholder='请输入电子邮箱' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="QQ">
				<a-input :disabled="disabled" maxlength="12" onkeyup="this.value=this.value.replace(/\D/g,'')"  v-decorator="[ 'qq']" placeholder='请输入您的QQ' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type == 'info'">
				<div class="up_img">
					<img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Back_img" :src="Back_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
				</div>
			</a-form-item>
			<!--label="驾驶员认证图片"-->
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"  class="upzjimg" v-if="type != 'info'">
				<template slot="label">
			       <span style="color: red;font-family: SimSun;">* </span>驾驶员认证图片
			    </template>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload1', {rules: [{ required: true, message: '请选择驾驶员认证图片!' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
						<div class="img_zz" v-if="Driver_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									<span style="color: #fff;">驾驶员正面照</span>  
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
						<div class="up_img_d" v-if="!Driver_img">
							<a-icon style="font-size: 30px;" :type="upload1_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span>驾驶员正面照 
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload2', {rules: [{ required: true, message: '请选择身份证正面照 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
						<div class="img_zz" v-if="Positive_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload2_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: #fff;">身份证正面照</span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
						<div class="up_img_d" v-if="!Positive_img">
							<a-icon style="font-size: 30px;" :type="upload2_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								<span style="color: red;">*必填：</span>身份证<span style="color: red;">正面</span>照  
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload3', {rules: [{ required: true, message: '请选择身份证背面照 !' }]}]"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Back_Change">
						<div class="img_zz" v-if="Back_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload3_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: #ffff;">身份证背面照</span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Back_img" :src="Back_img" alt="avatar" />
						<div class="up_img_d" v-if="!Back_img">
							<a-icon style="font-size: 30px;" :type="upload3_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span>身份证<span style="color: red;">背面</span>照 
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload4', {rules: [{ required: true, message: '请选择道路运输从业资格证 !' }]}]"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Qualifications_Change">
						<div class="img_zz" v-if="Qualifications_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="upload4_loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: #fff;">道路运输从业资格证</span> 
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
						<div class="up_img_d" v-if="!Qualifications_img">
							<a-icon style="font-size: 30px;" :type="upload4_loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span><span style="color: red;"></span>道路运输从业资格证 
							</div>
						</div>
					</a-upload>
				</a-form-item>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<div class="ant-row ant-form-item" v-if="type != 'info'">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<!--<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;"  @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>-->
							<a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" label="协议" class="wy-agreement"  >
								<a-checkbox v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
									我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
								</a-checkbox>
							</a-form-item>
						</span>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item" v-if="type != 'info'">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary"  html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								保存
							</a-button>
						</span>
					</div>
				</div>
			</div>
			<!--协议弹框-->
		    <a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			  <web @close="close" v-if="webShow" @cancel="close"></web>
		    </a-modal>
		    <a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			  <user @close="close" v-if="userShow" @cancel="close"></user>
		    </a-modal>
		</a-form>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail,checkCardNo} from 'utils/formValidate'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	export default {
		components: {
			Web,
			User
		},
		props:['datail','type','isSee'],
		data() {
			return {
				webShow:false,
				userShow:false,
				agreement:false,
				disabled: false,
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				FileUploadUrl2:environment.FileUploadUrl2,
                 
				Driver_img:'',// 驾驶员正面照片
				Positive_img:'',// 身份证正面照片
				Back_img:'',// 身份证背面照片
				Qualifications_img:'',// 道路运输从业资格证照片
				certificatesPics :'',// 道路运输从业资格证 
				certificatesPicsPath :'',// 道路运输从业资格证目录 
				driverPics :'',// 驾驶员照片
				driverPicsPath:'',// 驾驶员照片目录 
				idcardBackPics :'',// 身份证反面
				idcardBackPicsPath :'',// 身份证反面存放目录 
				idcardJustPics :'',//  身份证正面 
				idcardJustPicsPath :'',// 身份证正面存放目录
				
				loading: false,
				but_loading: false,
				upload1_loading: false,
				upload2_loading: false,
				upload3_loading: false,
				upload4_loading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
				// 证件类型
				cardTypeList: []
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			console.log(this.datail,'datail')
			console.log(this.type,'type')
			if(this.isSee){
				this.disabled = true
			}else{
				this.disabled = false
			}
			if(this.datail){
				let datail = this.datail
				setTimeout(()=>{
					this.form.setFieldsValue({
						address:datail.address,
						certificatesNo:datail.certificatesNo,
						certificatesType: parseInt(datail.certificatesType) || '',
						detailAddress:datail.detailAddress,
						driverName:datail.driverName,
						email:datail.email,
						mobile:datail.mobile,
						qq:datail.qq,
					});
				},0)
				if(datail.idcardBackPicsPath){
					this.Back_img =this.FileUploadUrl2+datail.idcardBackPicsPath+datail.idcardBackPics // 身份证反面
								setTimeout(() => {
					this.form.setFieldsValue({
					upload3:true
					});
				}, 100);

				}else{
					this.Back_img = null;
				}
				if(datail.idcardJustPicsPath){
					this.Positive_img =this.FileUploadUrl2+datail.idcardJustPicsPath+datail.idcardJustPics // 身份证正面
								setTimeout(() => {
					this.form.setFieldsValue({
					upload2:true
					});
				}, 100);

				}else{
					this.Positive_img = null;
				}

				if(datail.certificatesPicsPath){
					this.Qualifications_img = this.FileUploadUrl2+datail.certificatesPicsPath+datail.certificatesPics  // 道路从业资格证
								setTimeout(() => {
					this.form.setFieldsValue({
						upload4:true
					});
				}, 100);
				}else{
					this.Qualifications_img = null;
				}
				
				if(datail.driverPicsPath){
					this.Driver_img = this.FileUploadUrl2+datail.driverPicsPath+datail.driverPics // 驾驶员正面照片
					setTimeout(() => {
						this.form.setFieldsValue({
							upload1:true
						})
					}, 100);
				}else{
					this.Driver_img = null;
				}
				
				this.certificatesPics  = datail.certificatesPics// 道路运输从业资格证 
				this.certificatesPicsPath  = datail.certificatesPicsPath// 道路运输从业资格证目录 
				this.driverPics  = datail.driverPics// 驾驶员照片
				this.driverPicsPath = datail.driverPicsPath// 驾驶员照片目录 
				this.idcardBackPics  = datail.idcardBackPics// 身份证反面
				this.idcardBackPicsPath  = datail.idcardBackPicsPath// 身份证反面存放目录 
				this.idcardJustPics  = datail.idcardJustPics//  身份证正面 
				this.idcardJustPicsPath  = datail.idcardJustPicsPath// 身份证正面存放目录
				
				// this.Driver_img = this.driverPicsPath+this.driverPics// 驾驶员正面照片
				// this.Positive_img = this.idcardJustPicsPath+this.idcardJustPics// 身份证正面照片
				// this.Back_img = this.idcardBackPicsPath+this.idcardBackPics// 身份证背面照片
				// this.Qualifications_img = this.certificatesPicsPath+this.certificatesPics// 道路运输从业资格证照片
			}
			// 获取证件类型
			this.getCommonDict('cardTypeList',4);
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 字典表接口 
			getCommonDict (nameList,type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this.loading = false
		            switch(type){
		              case 4: 
		                this[nameList] = r.data.data.rows; 
		                break;
		            }
		            console.log('this[nameList]::',this[nameList],r.data)
				}).catch((e) => {
					this.loading = false;
				})
			},
			close(){
				this.webShow=false;
				this.userShow=false;
			},
			// 验证身份证号
			checkCardId:checkCardNo,
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			// 上传驾驶员正面照片
			Driver_Change(info){
				if(info.file.status === 'uploading') {
					this.upload1_loading = true
					return
				}
				if(info.file.status === 'done') {
					console.log(info)
					this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.driverPics = info.file.response.data.certificatesjpg// 驾驶员照片
					this.driverPicsPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
					this.upload1_loading = false
				}
			},
			// 身份证正面照
			Positive_Change(info){
				if(info.file.status === 'uploading') {
					this.upload2_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Positive_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.idcardJustPics = info.file.response.data.certificatesjpg//  身份证正面 
					this.idcardJustPicsPath = info.file.response.data.certificatesPath// 身份证正面存放目录
					this.upload2_loading = false
				}
			},
			// 上传身份证背面
			Back_Change(info){
				if(info.file.status === 'uploading') {
					this.upload3_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Back_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.idcardBackPics = info.file.response.data.certificatesjpg// 身份证反面
					this.idcardBackPicsPath = info.file.response.data.certificatesPath// 身份证反面存放目录 
					this.upload3_loading = false
				}
			},
			// 上传运输资格证照片
			Qualifications_Change(info){
				if(info.file.status === 'uploading') {
					this.upload4_loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Qualifications_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.certificatesPics = info.file.response.data.certificatesjpg// 道路运输从业资格证 
					this.certificatesPicsPath = info.file.response.data.certificatesPath// 道路运输从业资格证目录
					this.upload4_loading = false
				}
			},
			// 上传证件
			beforeUpload(file) {
				if(file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/jpg'){
					return true
				}else{
					this.$message.error('请选这正确的jpg.jpeg.png图片格式!')
					return false
				}
			},
			// 上传前事件
			handleChange(info) {
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					// Get this url from response in real world.
					getBase64(info.file.originFileObj, (imageUrl) => {
						this.imageUrl = imageUrl
						this.loading = false
					})
				}
			},
			// 认证提交
			handleSubmit(e) {
				if(this.but_loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.but_loading = true;
						values.userId = this.user.userId
						values.certificatesPics = this.certificatesPics// 道路运输从业资格证 
						values.certificatesPicsPath = this.certificatesPicsPath// 道路运输从业资格证目录 
						values.driverPics = this.driverPics// 驾驶员照片
						values.driverPicsPath= this.driverPicsPath// 驾驶员照片目录 
						values.idcardBackPics = this.idcardBackPics// 身份证反面
						values.idcardBackPicsPath = this.idcardBackPicsPath// 身份证反面存放目录 
						values.idcardJustPics = this.idcardJustPics//  身份证正面 
						values.idcardJustPicsPath = this.idcardJustPicsPath// 身份证正面存放目录
						console.log('Received values of form: ', values);
						if (this.type === 'edit') {
							this.editSubmit(values)
						}else{
							this.addSubmit(values)
						}
					}
				});
			},
			// 添加保存数据
			addSubmit(values){
				this.$post('info/infoDriver', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.form.resetFields();
						this.Driver_img = ''// 驾驶员正面照片
						this.Positive_img = ''// 身份证正面照片
						this.Back_img = ''// 身份证背面照片
						this.Qualifications_img = ''// 道路运输从业资格证照片
					}
					this.but_loading = false;
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
					this.but_loading = false;
				})
			},
			// 编辑修改数据
			editSubmit(values){
				values.driverId = this.datail.driverId;
				values.approvalStatus = 106;
				this.$put('info/infoDriver', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.but_loading = false;
						this.$message.success(r.data.message)
						this.$emit('close');
					}
				}).catch((e) => {
					console.log(e)
					this.but_loading = false;
					this.$message.error(e)
				})
			},
			callback(key) {
				console.log(key)
			}
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.car-info {
		.upzjimg{
			.up_img{
				float: left;
				position: relative;
				margin-right: 10px;
				margin-bottom: 10px;
				.ant-upload.ant-upload-select-picture-card{
					width: 216px;
					height: 216px;
				}
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding-top: 55px; 
				}
				.img_zz{
					width: 216px;
					height: 216px; 
					position: absolute; 
					color: #fff;
					border: 1px solid;
					top: 0;
					left: 0;
					.img_zz_text{
						width: 100%;
						text-align: center;
						position: absolute;
						z-index: 10;
						padding-top: 55px; 
					}
					.img_zz_d{
						position: absolute;
						width: 216px ;
						height:216px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>